<template>
  <el-main>
    <el-button class="list-btn" type="primary" icon="el-icon-plus" @click="createItem" v-if="btnShow">创建</el-button>
    <el-table :data="tableData" :row-class-name="tableRowClassName" v-if="listShow">
      <el-table-column prop="num" label="序号"></el-table-column>
      <el-table-column prop="username" label="用户名"></el-table-column>
      <el-table-column prop="nickname" label="昵称"></el-table-column>
      <el-table-column prop="phone" label="电话"></el-table-column>
      <el-table-column prop="email" label="邮箱"></el-table-column>
      <el-table-column prop="sex" label="性别"></el-table-column>
      <el-table-column prop="id" label="操作">
        <template slot-scope="scope">
          <el-button
            class="list-btn"
            type="success"
            @click="editItem(scope.$index,scope.row)"
            icon="el-icon-edit"
            circle
          ></el-button>
          <el-button 
            class="list-btn"
            type="danger"
            @click="deleteItem(scope.$index,scope.row)"
            icon="el-icon-delete"
            circle
          ></el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-form ref="form" :model="form" label-width="80px" v-if="editShow">
      <el-form-item label="用户名">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="昵称">
        <el-input v-model="form.nickname"></el-input>
      </el-form-item>
      <el-form-item label="电话">
        <el-input v-model="form.phone"></el-input>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="form.email"></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-input v-model="form.sex"></el-input>
      </el-form-item>
      <el-form-item label="权限">
        <el-select v-model="form.role" value-key="id" placeholder="请选择角色权限">
        <el-option label="无" :value="null" ></el-option>
          <el-option v-for="role in edit.roles" :key="role.id" :label="role.name" :value="role"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="头像图片">
        <el-select v-model="form.picture" value-key="id" placeholder="请选择头像图片">
        <el-option label="无" :value="null" ></el-option>
          <el-option v-for="picture in edit.pictures" :key="picture.id" :label="picture.resourcePath" :value="picture"></el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="活动时间">
        <el-col :span="11">
          <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
        </el-col>
        <el-col class="line" :span="2">-</el-col>
        <el-col :span="11">
          <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
        </el-col>
      </el-form-item>-->
      <el-form-item label="专辑">
        <el-checkbox-group v-model="form.albums" v-if="newShow==false">
          <el-checkbox
            v-for="album in edit.albums"
            :key="album.id"
            :label="album"
            :checked="check(edit.user.albums, album)"
          >{{album.name}}</el-checkbox>
        </el-checkbox-group>
        <el-checkbox-group v-model="form.albums" v-else>
          <el-checkbox
            v-for="album in edit.albums"
            :key="album.id"
            :label="album"
          >{{album.name}}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="所属组合">
        <el-checkbox-group v-model="form.combinations" v-if="newShow==false">
          <el-checkbox
            v-for="combination in edit.combinations"
            :key="combination.id"
            :label="combination"
            :checked="check(edit.user.combinations, combination)"
            name="type"
          >{{combination.name}}</el-checkbox>
        </el-checkbox-group>
        <el-checkbox-group v-model="form.combinations" v-else>
          <el-checkbox
            v-for="combination in edit.combinations"
            :key="combination.id"
            :label="combination"
            name="type"
          >{{combination.name}}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="评论">
        <el-checkbox-group v-model="form.comments" v-if="newShow==false">
          <el-checkbox
            v-for="comment in edit.comments"
            :key="comment.id"
            :label="comment"
            :checked="check(edit.user.comments, comment)"
            name="type"
          >{{comment.name}}</el-checkbox>
        </el-checkbox-group>
        <el-checkbox-group v-model="form.comments" v-else>
          <el-checkbox
            v-for="comment in edit.comments"
            :key="comment.id"
            :label="comment"
            name="type"
          >{{comment.name}}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="收藏歌单">
        <el-checkbox-group v-model="form.likeSonglists" v-if="newShow==false">
          <el-checkbox
            v-for="likeSonglist in edit.likeSonglists"
            :key="likeSonglist.id"
            :label="likeSonglist"
            :checked="check(edit.user.likeSonglists, likeSonglist)"
            name="type"
          >{{likeSonglist.name}}</el-checkbox>
        </el-checkbox-group>
        <el-checkbox-group v-model="form.likeSonglists" v-else>
          <el-checkbox
            v-for="likeSonglist in edit.likeSonglists"
            :key="likeSonglist.id"
            :label="likeSonglist"
            name="type"
          >{{likeSonglist.name}}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="自建歌单">
        <el-checkbox-group v-model="form.ownedSonglists" v-if="newShow==false">
          <el-checkbox
            v-for="ownedSonglist in edit.ownedSonglists"
            :key="ownedSonglist.id"
            :label="ownedSonglist"
            :checked="check(edit.user.ownedSonglists, ownedSonglist)"
            name="type"
          >{{ownedSonglist.name}}</el-checkbox>
        </el-checkbox-group>
        <el-checkbox-group v-model="form.ownedSonglists" v-else>
          <el-checkbox
            v-for="ownedSonglist in edit.ownedSonglists"
            :key="ownedSonglist.id"
            :label="ownedSonglist"
            name="type"
          >{{ownedSonglist.name}}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="收藏歌手">
        <el-checkbox-group v-model="form.singers" v-if="newShow==false">
          <el-checkbox
            v-for="singer in edit.singers"
            :key="singer.id"
            :label="singer"
            :checked="check(edit.user.singers, singer)"
            name="type" 
          >{{singer.chinesename}}</el-checkbox>
        </el-checkbox-group>
        <el-checkbox-group v-model="form.singers" v-else>
          <el-checkbox
            v-for="singer in edit.singers"
            :key="singer.id"
            :label="singer"
            name="type" 
          >{{singer.chinesename}}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <!-- <el-form-item label="活动形式">
        <el-input type="textarea" v-model="form.desc"></el-input>
      </el-form-item>-->
      <el-form-item>
        <el-button type="primary" @click="onSubmit" v-if="newShow==false">确定</el-button>
        <el-button type="primary" @click="add" v-else>确定</el-button>
        <el-button @click="back">取消</el-button>
      </el-form-item>
    </el-form>
  


  </el-main>
</template>

<script type="module">
var users = [];
var formData = [];
var editData = [];
var delFlag = false;
module.exports = {
  data: function() {
    return {
      tableData: users,
      editShow: false,
      listShow: true,
      newShow: false,
      btnShow: true,
      edit: editData,
      emptyForm: {
        id: "",
        username: "",
        nickname: "",
        phone: "",
        email: "",
        sex: "",
        password: "",
        role: "",
        picture: "",
        albums: [],
        combinations: [],
        comments: [],
        likeSonglists: [],
        ownedSonglists: [],
        singers: []
      },
      form: {
        id: "",
        username: "",
        nickname: "",
        phone: "",
        email: "",
        sex: "",
        password: "",
        role: "",
        picture: "",
        albums: [],
        combinations: [],
        comments: [],
        likeSonglists: [],
        ownedSonglists: [],
        singers: []
      }
    };
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      row.index = rowIndex;
    },
    gettable() {
      $.ajax({
        url: "/listAllUsers",
        type: "get",
        dataType: "json",
        async: false,
        success(data) {
          console.log(data.users);
          for (let i in data.users) {
            users[i] = {
              num: i,
              username: data.users[i].username,
              nickname: data.users[i].nickname,
              phone: data.users[i].phone,
              email: data.users[i].email,
              id: data.users[i].id,
              sex: data.users[i].sex
            };
          }
        }
      });
    },
    deleteItem(item, index) {
      let id = '{"id": ' + index.id + "}";
      $.ajax({
        url: "/deleteUser",
        type: "post",
        data: JSON.parse(id),
        async: false,
        success(data) {
          if(data) {
            delFlag = true;
          } else {
            delFlag = false;
          } 
        }
      });
      if(delFlag) {
        this.$message({
          message: '恭喜你，删除成功',
          type: 'success'
        });
        setTimeout(function(){
          window.location.href = "/index?page=12";
        }, 1500);
      } else {
        this.$message.error('错误窝，删除失败');
      }
    },
    editItem(item, index) {
      this.newShow = false;
      this.listShow = false;
      this.editShow = true;
      this.btnShow = false;
      let id = '{"id": ' + index.id + "}";
      $.ajax({
        url: "/editUser",
        type: "get",
        dataType: "json",
        async: false,
        data: JSON.parse(id),
        success(data) {
          console.log(data);
          editData = {
            user: data.user,
            singers: data.singers,
            albums: data.albums,
            combinations: data.combinations,
            likeSonglists: data.songlists,
            ownedSonglists: data.songlists,
            roles: data.roles,
            pictures: data.pictures
          };
          console.log(editData);
          formData = {
            id: data.user.id,
            username: data.user.username,
            nickname: data.user.nickname,
            phone: data.user.phone,
            email: data.user.email,
            password: data.user.password,
            sex: data.user.sex,
            role: data.user.role,
            picture: data.user.picture,
            albums: [],
            combinations: [],
            comments: [],
            likeSonglists: [],
            ownedSonglists: [],
            singers: []
          };
          console.log(formData.role);
        }
      });
      this.edit = editData;
      this.form = formData;
    },
    check(objs, obj) {
      for (let i in objs) {
        if (objs[i].id == obj.id) return true;
      }
      return false;
    },
    onSubmit() {
      console.log(JSON.stringify(this.form));
      $.ajax({
        url: "/updateUser",
        type: "post",
        contentType: "application/json",
        async: false,
        data: JSON.stringify(this.form),
        success(data) {
          window.location.href = "/index?page=12";
        }
      });
    },
    back() {
      this.listShow = true;
      this.editShow = false;
      this.btnShow = true;
      this.emptyForm = {
        id: "",
        username: "",
        nickname: "",
        phone: "",
        email: "",
        password: "",
        sex: "",
        role: "",
        picture: "",
        albums: [],
        combinations: [],
        comments: [],
        likeSonglists: [],
        ownedSonglists: [],
        singers: []
      };
    },
    createItem() {
      this.newShow = true;
      this.listShow = false;
      this.editShow = true;
      this.btnShow = false;
      $.ajax({
        url: "/newUser",
        type: "get",
        dataType: "json",
        async: false,
        success(data) {
          editData = {
            singers: data.singers,
            albums: data.albums,
            combinations: data.combinations,
            likeSonglists: data.songlists,
            ownedSonglists: data.songlists,
            roles: data.roles,
            pictures: data.pictures
          };
          //console.log(editData);
        }
      });
      this.edit = editData;
      this.form = this.emptyForm;
    },
    add() {
      console.log(JSON.stringify(this.form));
      $.ajax({
        url: "/addUser",
        type: "post",
        contentType: "application/json",
        async: false,
        data: JSON.stringify(this.form),
        success(data) {
          window.location.href = "/index?page=12";
        }
      });
    }
  },
  mounted: function() {
    // console.log("3");
    this.gettable();
    // console.log("4");
  }
};
</script>